<template>
    <div class="wrapper">
        <!--  头部-->
        <div class="header">
            <div class="header-txt">商家信息</div>
        </div>
        <!--  中间部分-->
        <div class="middle">
            <div class="businessInfo">
                <img id="businessImage0" src="../img/sj01.png"/>
                <h3 id="businessName0">万家饺子（软件园）</h3>
                <p id="businessPrice0">￥15起送 ￥3配送</p>
                <p id="businessExplain0">美食</p>
            </div>
            <div class="businessFood">
                <div class="businessFoodImage">
                    <img id="foodImage0" src="../img/sj02.png" />
                </div>
                <div class="businessFoodTxt">
                    <h4 id="foodName0">小锅拌饭</h4>
                    <h5 id="foodExplain0">炒饭</h5>
                    <h5 id="foodPrice0">￥15</h5>
                </div>
                <div class="businessFoodQuantity">
                    <i class="fa fa-minus-circle" @click="subFoodQuantity(0)" style="color: #858585; font-size: 5.5vw"></i>
                    <p id="FoodQuantity0">0</p>
                    <i class="fa fa-plus-circle" @click="addFoodQuantity(0)" style="color:#8897FF; font-size: 5.5vw"></i>
                </div>
            </div>
            <div class="businessFood">
                <div class="businessFoodImage">
                    <img id="foodImage1" src="../img/sj03.png" />
                </div>
                <div class="businessFoodTxt">
                    <h4 id="foodName1">麦当劳</h4>
                    <h5 id="foodExplain1">炸鸡汉堡</h5>
                    <h5 id="foodPrice1">￥15</h5>
                </div>
                <div class="businessFoodQuantity">
                    <i class="fa fa-minus-circle" @click="subFoodQuantity(1)" style="color: #858585; font-size: 5.5vw"></i>
                    <p id="FoodQuantity1">0</p>
                    <i class="fa fa-plus-circle" @click="addFoodQuantity(1)" style="color:#8897FF; font-size: 5.5vw"></i>
                </div>
            </div>
            <div class="businessFood">
                <div class="businessFoodImage">
                    <img id="foodImage2" src="../img/sj04.png" />
                </div>
                <div class="businessFoodTxt">
                    <h4 id="foodName2">米村拌饭</h4>
                    <h5 id="foodExplain2">拌饭</h5>
                    <h5 id="foodPrice2">￥15</h5>
                </div>
                <div class="businessFoodQuantity">
                    <i class="fa fa-minus-circle" @click="subFoodQuantity(2)" style="color: #858585; font-size: 5.5vw"></i>
                    <p id="FoodQuantity2">0</p>
                    <i class="fa fa-plus-circle" @click="addFoodQuantity(2)" style="color:#8897FF; font-size: 5.5vw"></i>
                </div>
            </div>
            <div class="businessFood">
                <div class="businessFoodImage">
                    <img id="foodImage3" src="../img/sj05.png" />
                </div>
                <div class="businessFoodTxt">
                    <h4 id="foodName3">申记串串香</h4>
                    <h5 id="foodExplain3">串串香</h5>
                    <h5 id="foodPrice3">￥15</h5>
                </div>
                <div class="businessFoodQuantity">
                    <i class="fa fa-minus-circle" @click="subFoodQuantity(3)" style="color: #858585; font-size: 5.5vw"></i>
                    <p id="FoodQuantity3">0</p>
                    <i class="fa fa-plus-circle" @click="addFoodQuantity(3)" style="color:#8897FF; font-size: 5.5vw"></i>
                </div>
            </div>
            <div class="businessFood">
                <div class="businessFoodImage">
                    <img id="foodImage4" src="../img/sj06.png" />
                </div>
                <div class="businessFoodTxt">
                    <h4 id="foodName4">半亩良田）</h4>
                    <h5 id="foodExplain4">炒菜</h5>
                    <h5 id="foodPrice4">￥15</h5>
                </div>
                <div class="businessFoodQuantity">
                    <i class="fa fa-minus-circle" @click="subFoodQuantity(4)" style="color: #858585; font-size: 5.5vw"></i>
                    <p id="FoodQuantity4">0</p>
                    <i class="fa fa-plus-circle" @click="addFoodQuantity(4)" style="color:#8897FF; font-size: 5.5vw"></i>
                </div>
            </div>
        </div>
        <div>&nbsp;</div>
        <!--  底部-->
        <div class="footer">
            <div class="footerInfo">
                <div id="total" class="footerInfoTop">￥0</div>
                <div class="footerInfoBottom">另需配送费0元</div>
            </div>
            <div class="footerPay">
                <div class="footerPayTxt" @click="handleClick(6)">去结算</div>
            </div>

            <div class="footerImage">
                <div id="totalQuantity" class="footerImageRedTxt">0</div>
                <i class="fa fa-shopping-cart" ></i>
            </div>
        </div>

    </div>
</template>

<script setup>
import router from "../router/index.js";

function handleClick(Num){
    //路由负责跳转
    if (Num===1)router.push('/Index')
    if(Num===2)router.push('/OrderList')
    if(Num===3)router.push('/Login')
    if(Num===6){
        localStorage.setItem("money",(parseInt(total.innerText.split("￥")[1])))
        router.push('/Order')
    }
}
function addFoodQuantity(x){
    //实物数量更新
    var quantity = document.getElementById('FoodQuantity' + x);
    quantity.innerText = (Number(quantity.innerText) + 1).toString();
    //更新总价
    var total = document.getElementById("total");
    var sub = document.getElementById("foodPrice"+x.toString());
    //增加总量
    total.innerText ="￥"+(parseInt(sub.innerText.split("￥")[1]) + parseInt(total.innerText.split("￥")[1])).toString();
    var totalQuantity = document.getElementById("totalQuantity");
    totalQuantity.innerText = parseInt(totalQuantity.innerText) + 1;
}

function subFoodQuantity(x){
    //计算数量
    var quantity = document.getElementById('FoodQuantity' + x);
    //实际数量要减一
    quantity.innerText = (Number(quantity.innerText) - 1).toString();
    var total = document.getElementById("total");
    //
/*    console.log((parseInt(total.innerText.split("￥")[1])))*/
    var sub = document.getElementById("foodPrice"+x.toString());
    total.innerText ="￥"+(parseInt(total.innerText.split("￥")[1])-parseInt(sub.innerText.split("￥")[1])).toString();
    totalQuantity.innerText = parseInt(totalQuantity.innerText) - 1;

}
</script>

<style scoped lang="css">
@import "../../src/css/global.css";
@import "../../src/css/font-awesome/css/font-awesome.min.css";
@import "../../src/css/businessNew.css";
@import "../../src/css/normalize.css";
</style>